<template>
    <el-dialog v-model="show" modal-class="log-dialog" width="900" align-center center>
        <template #title>
            <div class="log-title">
                <CustomTitle title="商品审核驳回" />
            </div>
        </template>
        <slot></slot>
        <div class="blank"></div>
        <el-form-item label="备注" class="remark">
            <el-input v-model="overruleDetail.newOverruleReason" class="areaText" :rows="10" type="textarea"
                :placeholder="overrulePlaceholder" />
            <div class="red">温馨提示：请详细描述驳回原因，以便商家明确知晓并更改商品信息 ~ ~</div>
        </el-form-item>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" @click="confirm"> 确认驳回 </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    overruleDetail: {
        type: Object,
        default: () => { }
    }
})
const emit = defineEmits(['update:visible', 'confirmOverrule']);
const show = computed({
    get: () => props.visible,
    set: (val) => emit('update:visible', val)
});
const confirm = () => {
    emit('confirmOverrule');
}
</script>


<style lang="scss" scoped>
.blank {
    height: 10px;
    background: #eef1f4;
    margin: 20px 0;
}
.remark{
    padding:0 20px;
}
</style>
<style lang="scss">
.log-dialog {
    .el-dialog {
        padding: 24px 0 !important;
    }

    .goods-detail {
        padding: 0 20px;
    }
}
.red {
  color: red;
}
.log-title {
  padding-left: 24px;
}

</style>